
<template>
  <!-- 导入 -->
  <basic-container>
    <!-- table 展示  -->
    <div class="title">导入分车站数据</div>
    <el-table
      :data="tableData"
      style="width: 100%"
    >
      <el-table-column
        prop="verifyConfirmName"
        label="分车站数据"
        width="350"
      >
      </el-table-column>
      <el-table-column
        prop="filename"
        label="文件名称"
      > </el-table-column>
      <el-table-column label="上传结果">
        <template slot-scope="scope">
          {{ scope.row.uploadStatus | uploadStatusFilter }}
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="180"
      >
        <template slot-scope="scope">
          <el-upload
            style="display: inline-block; margin-right: 20px"
            :ref="`upload${scope.row.verfiyConfirmFlag}`"
            action="/"
            :auto-upload="false"
            :on-change="(file) => handleChange(file, scope.row)"
            :disabled="uploading"
          >
            <el-button
              slot="trigger"
              type="text"
              size="small"
            >上传</el-button>
          </el-upload>
          <el-button
            @click="handleDownloadClick(scope.row)"
            type="text"
            size="small"
          >导出模板</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align: center; margin: 40px">
      <el-button
        :loading="uploading"
        @click="handleCancel"
      >取消</el-button>
      <el-button
        :loading="uploading"
        type="primary"
        @click="handleUploadFinish"
      >导入预处理</el-button>
    </div>
  </basic-container>
</template>

<script>
import { tables } from "@/api/rca/swckbomsmallpayment";
import { handleExcelResponse } from "@/util/util";

export default {
  name: "ImportData",
  data () {
    return {
      tableData: [],
    };
  },
  computed: {
    uploading () {
      return this.tableData.find((data) => {
        return data.file && ["uploading", "pendding"].includes(data.upload);
      });
    },
    needUpload () {
      return !this.tableData.find((data) => {
        return data.file && data.upload === "success";
      });
    },
    fileUploaded () {
      return this.tableData.find((data) => {
        return data.file;
      });
    },
  },
  created () {
    this.loadTables();
  },
  methods: {
    async loadTables () {
      this.tableData = [{
        verfiyConfirmFlag: "1",
        verifyConfirmName: "微信",
      }, {
        verfiyConfirmFlag: "2",
        verifyConfirmName: "支付宝",
      }];
    },

    handleClose () {
      this.$emit("close");
    },
    handleCancel () {
      this.handleClose();
    },
    handleUploadFinish () {
      this.$emit("uploadSuccess");
    },
    async handleChange ({ raw: file }, record) {
      this.$set(record, "file", file);
      this.$set(record, "filename", file.name);
      this.$set(record, "uploadStatus", "pendding");
      this.$refs[`upload${record.verfiyConfirmFlag}`].clearFiles();

      this.$set(record, "uploadStatus", "uploading");
      const formData = new FormData();
      formData.append("verfiyConfirmFlag", record.verfiyConfirmFlag);
      formData.append("file", record.file, record.file.name);
      try {
        const { data } = await tables.upload(formData);
        if (data) {
          this.$set(record, "uploadStatus", "success");
          this.$message.success(`[${record.verifyConfirmName}]${record.file.name}上传成功`);
        }
      } catch (e) {
        this.$set(record, "uploadStatus", "fail");
      }
    },

    async handleDownloadClick (record) {
      try {
        const { verfiyConfirmFlag, verifyConfirmName } = record;
        const res = await tables.template({
          verfiyConfirmFlag,
        });
        // handleExcelResponse(res, `${verifyConfirmName}模板.xlsx`);
        handleExcelResponse(res);
      } finally {

      }
    },
  },
  filters: {
    uploadStatusFilter (val) {
      const map = {
        pendding: "等待上传",
        success: "上传成功",
        fail: "上传失败",
        uploading: "上传中",
      };
      return val ? map[val] : '';
    },
  },
};
</script>
<style lang="scss">
.rca_import_dialog {
  .import_label {
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: 600;
  }
  .import_value {
    margin-bottom: 20px;
  }
}
</style>
<style scoped lang="scss">
.title {
  line-height: 30px;
  border-left: 2px solid blue;
  padding: 0 20px;
  margin-bottom: 30px;
}
</style>
